<template>
	<div class="main-con">
		<el-form class="form-con" :model="assetForm" label-suffix=": " ref="form" size="small" label-width="115px">
			<el-form-item label="申请单标题" prop="orderTitle" :rules="{ required: true, message: '请输入申请单标题', trigger: 'blur' }">
				<el-input v-model="assetForm.orderTitle" style="width: 35%;min-width: 300px;"></el-input>
			</el-form-item>
			<el-form-item prop="assetList" label="上架资产" :rules="{ required: true, validator: validAssetList, trigger: 'blur' }">
				<el-button icon="el-icon-circle-plus" type="text" size="medium" class="text-btn-table" @click="addAsset">添加资产</el-button>
				<el-table :data="assetForm.assetList" stripe class="systemTable" empty-text=" ">
					<el-table-column prop="assetNum" label="资产编号" min-width="150" show-overflow-tooltip> </el-table-column>
					<el-table-column prop="assetTypeName" label="资产类型" min-width="150" show-overflow-tooltip> </el-table-column>
					<el-table-column prop="assetModel" label="资产型号" min-width="150" show-overflow-tooltip> </el-table-column>
					<el-table-column prop="assetSerialNum" label="资产序列号" min-width="150" show-overflow-tooltip> </el-table-column>
					<el-table-column prop="hostName" min-width="150">
						<template slot="header">
							<span style="color: red">*</span>
							<span>主机名</span>
						</template>
						<template slot-scope="{ row, $index }">
							<!-- :prop="`assetList.${$index}.hostName`" -->
							<el-form-item class="form-item-column" :prop="'assetList.' + $index + '.hostName'" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
								<el-input v-model="row.hostName" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="hostNameCn" label="主机中文名" min-width="150">
						<template slot="header">
							<span style="color: red">*</span>
							<span>主机中文名</span>
						</template>
						<template slot-scope="{ row, $index }">
							<el-form-item class="form-item-column" :prop="'assetList.' + $index + '.hostNameCn'" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
								<el-input v-model="row.hostNameCn" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="assetU" label="资产U数" width="120">
						<template slot="header">
							<span style="color: red">*</span>
							<span>资产U数</span>
						</template>
						<template slot-scope="{ row, $index }">
							<el-form-item class="form-item-column" :prop="'assetList.' + $index + '.assetU'" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
								<el-select v-model="row.assetU" placeholder="请选择" clearable filterable>
									<el-option v-for="item in assetUtypeOpt" :key="item.oid" :label="item.name" :value="item.name"> </el-option>
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="safeZone" label="安全区域" width="120">
						<template slot="header">
							<span style="color: red">*</span>
							<span>安全区域</span>
						</template>
						<template slot-scope="{ row, $index }">
							<el-form-item class="form-item-column" :prop="'assetList.' + $index + '.safeZone'" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
								<el-select v-model="row.safeZone" placeholder="请选择" clearable filterable>
									<el-option v-for="item in safeZoneTypeOpt" :key="item.oid" :label="item.name" :value="item.oid"> </el-option>
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="beSystem" label="业务系统" width="120">
						<template slot="header">
							<span style="color: red">*</span>
							<span>业务系统</span>
						</template>
						<template slot-scope="{ row, $index }">
							<el-form-item class="form-item-column" :prop="'assetList.' + $index + '.beSystem'" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
								<el-select v-model="row.beSystem" placeholder="请选择" clearable filterable>
									<el-option v-for="item in beSystemOpt" :key="item.id" :label="item.name" :value="item.name"> </el-option>
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column prop="reserveSources" width="120">
						<template slot="header">
							<div style="display: flex;align-items: center;">
								<span style="color: red;">*</span> 是否为后备资产
								<el-tooltip style="margin-left: 8px;" effect="light" placement="top">
									<div style="text-align: center;" slot="content">正确配置完成的，断开业务网络的，无法自动承载业务的处于开机状态的设备</div>
									<img style="width: 15px;height: 15px;color: rgba(180, 180, 180, 1);" src="@/assets/image/serverRoom/question.svg" />
								</el-tooltip>
							</div>
						</template>
						<template slot-scope="{ row, $index }">
							<el-form-item class="form-item-column" :prop="'assetList.' + $index + '.reserveSources'" :rules="[{ required: true, message: '请选择', trigger: 'change' }]">
								<el-select v-model="row.reserveSources" placeholder="请选择" clearable filterable>
									<el-option v-for="item in reserveSourcesOpt" :key="item.oid" :label="item.name" :value="item.oid"> </el-option>
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column width="60" label="操作" align="center" fixed="right">
						<template v-slot="scope">
							<el-button class="text-btn-table" type="text" size="medium" @click="removeAsset(scope.$index)">移除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="使用项目" prop="proCode">
				<el-select v-model="assetForm.proCode" placeholder="请选择" clearable filterable @change="proChange" style="width: 35%;min-width: 300px;">
					<el-option v-for="item in projectList" :key="item.id" :label="item.proName" :value="item.proCode"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="实施厂商" prop="executeManufacturerId" :rules="{ required: true, message: '请选择实施厂商', trigger: 'change' }">
				<el-select v-model="assetForm.executeManufacturerId" placeholder="请选择" clearable filterable @change="executeManufacturerChange" style="width: 35%;min-width: 300px;">
					<el-option v-for="item in executeManufacturerOpt" :key="item.id" :label="item.name" :value="item.oid"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="实施负责人" prop="executeLeaderName" :rules="{ required: true, message: '请输入实施负责人姓名', trigger: 'blur' }">
				<el-input v-model="assetForm.executeLeaderName" style="width: 35%;min-width: 300px;"></el-input>
			</el-form-item>
			<el-form-item
				label="负责人手机号"
				prop="executeLeaderTel"
				:rules="[
					{ required: true, message: '请输入实施负责人手机号', trigger: 'blur' },
					{ required: true, validator: validatePhoneTwo, message: '请输入正确手机号', trigger: 'blur' },
				]"
			>
				<el-input v-model="assetForm.executeLeaderTel" style="width: 35%;min-width: 300px;"></el-input>
				<div style="font-size: 12px;font-family: PingFang SC;font-weight: 400;color: #999999;">
					*请确保实施负责人手机号填写正确，单据审核通过后，需要给实施负责人发送施工短信。
				</div>
			</el-form-item>
			<el-form-item label="备注" prop="notes">
				<el-input type="textarea" v-model="assetForm.notes" :autosize="{ minRows: 3 }" style="width: 50%;min-width: 500px;" maxlength="200" show-word-limit></el-input>
			</el-form-item>
		</el-form>
		<div class="bottom-btn">
			<el-button @click="cancelForm">取消</el-button>
			<el-button @click="saveTemp">保存草稿</el-button>
			<el-button type="primary" @click="onSubmit">提交审核</el-button>
		</div>
		<model-dialog ref="modelDialog">
			<template v-slot:dialog-content>
				<select-asset ref="modelContent" @onsubmit="assetSubmit" @cancel="cancelAsset" assetState="0" :limitPro="false" />
			</template>
		</model-dialog>
		<asset-flow-send
			v-if="showFlowSend"
			@close="closeFlowSend"
			:wfClassId="wfClassId"
			:checkType="checkFlowType"
			@ok="FlowSendsave"
			:instNodeId="instNodeId"
			:sendtype="sendtype"
			:wfUrl="wfUrl"
			:formData="assetForm"
		></asset-flow-send>
	</div>
</template>
<script>
	import ModelDialog from '@/views/components/ModelDialog'
	import selectAsset from './models/selectAsset'
	import { selectDictItems } from '@/system/api/dictionaryManage'
	import assetPutawayApi from '@/api/assetPutawayApi'
	import { getAction, postAction } from '@/utils/httpUtil'
	import { validatePhoneTwo } from '@/utils/validate'
	import assetApi from '@/api/assetApi'
	import assetFlowMixin from '@/mixins/assetFlowMixin'
	export default {
		name: 'assetPutawayAdd',
		components: {
			ModelDialog,
			selectAsset,
		},
		mixins: [assetFlowMixin],
		data() {
			return {
				assetForm: {
					orderTitle: '',
					notes: '',
					executeManufacturerId: '',
					executeLeaderName: '',
					executeLeaderTel: '',
					assetList: [],
					wfClassId: '', // 流程id
				},
				projectList: [],
				showProjectWin: false,
				// assetManufacturerOpt: [], // 生产厂商
				wfClassId: '',
				assetUtypeOpt: [], // 资产U数
				safeZoneTypeOpt: [], // 安全区域
				beSystemOpt: [], // 业务系统
				reserveSourcesOpt: [], // 是否后备资源
				executeManufacturerOpt: [], // 实时厂商
				wfUrl: {
					getSendToUrl: '/assetManagePut/getSendTo',
					sendToUrl: '/assetManagePut/sendTo',
					getBackToUrl: '/assetManagePut/getBackTo',
					backToUrl: '/assetManagePut/backTo',
					getStartToUrl: '/assetManagePut/getStartTo',
					startToUrl: '/assetManagePut/assetPutSubmit',
				},
			}
		},
		created() {
			// 资产U数
			// selectDictItems({ code: 'assetUtype' }).then(res => {
			// 	this.assetUtypeOpt = res.info
			// })
			this.commonLoadDic('资产U数', 'assetUtypeOpt')
			// 安全区域
			// selectDictItems({ code: 'safeZoneType' }).then(res => {
			// 	this.safeZoneTypeOpt = res.info
			// })
			this.commonLoadDic('安全区域', 'safeZoneTypeOpt')
			// 业务系统
			// selectDictItems({ code: 'beSystem' }).then(res => {
			// 	this.beSystemOpt = res.info
			// })
			getAction(assetPutawayApi.selectSystem).then(res => {
				if (res.info) {
					res.info.forEach((item, index) => {
						this.beSystemOpt.push({
							id: index,
							name: item,
						})
					})
				}
			})
			// 是否后备资源
			// selectDictItems({ code: 'reserveSources' }).then(res => {
			// 	this.reserveSourcesOpt = res.info
			// })
			this.commonLoadDic('是否', 'reserveSourcesOpt')
			// // 实施厂商
			// selectDictItems({ code: 'manufacturer' }).then(res => {
			//   this.executeManufacturerOpt = res.info
			// })
			this.commonLoadDic('实施厂商', 'executeManufacturerOpt')
			// xiangmu
			this.loadProject()
		},
		mounted() {
			const { params, query } = this.$route
			if (params) {
				this.assetForm.wfClassId = params.wfId
				this.wfClassId = params.wfId
			}
			if (query && query.id) {
				this.loadData(query.id)
			}
			if (query && query.assetIds) {
				this.loadAssetData(query.assetIds)
			}
		},
		methods: {
			validatePhoneTwo,
			loadData(id) {
				getAction(assetPutawayApi.detial + id).then(res => {
					if (res.success && res.info) {
						this.assetForm = res.info
						if (!this.assetForm.wfClassId) {
							this.assetForm.wfClassId = this.wfClassId
						}
					}
				})
			},
			loadAssetData(ids) {
				getAction(assetApi.asset.assetDetails + ids).then(res => {
					this.assetForm.assetList = res.info
				})
			},
			loadProject() {
				getAction(assetApi.assetManage.selectProject).then(res => {
					this.projectList = res.info
				})
			},
			loadExecuteManufacturer() {
				getAction(assetApi.asset.queryByCode, { name: '实施厂商' }).then(res => {
					this.executeManufacturerOpt = res.info
				})
			},
			commonLoadDic(type, objStr) {
				getAction(assetApi.asset.queryByCode, { name: type }).then(res => {
					this[objStr] = res.info
				})
			},
			validAssetList(rule, value, callback) {
				if (!this.assetForm.assetList || this.assetForm.assetList.length === 0) {
					callback(new Error('请完善资产信息!'))
				} else {
					callback()
				}
			},
			proChange(val) {
				this.assetForm.proName = this.getNameByCode(this.projectList, val, 'proCode', 'proName')
				this.assetForm.proLeaderName = this.getNameByCode(this.projectList, val, 'proCode', 'creater')
			},
			executeManufacturerChange(val) {
				this.assetForm.executeManufacturerName = this.getNameByCode(this.executeManufacturerOpt, val, 'oid')
			},
			getNameByCode(options, val, code = 'code', name = 'name') {
				let item = options.find(item => {
					return item[code] == val
				})
				return item[name]
			},
			addAsset() {
				this.$refs.modelDialog.showDialogInfo('请选择资产', '', false, '80%')
			},
			assetSubmit(data) {
				if (data && data.length > 0) {
					if (!this.assetForm.assetList || this.assetForm.assetList.length == 0) {
						this.assetForm.assetList = [...data]
					} else {
						data.forEach(el => {
							let index = this.assetForm.assetList.findIndex(item => {
								return item.id == el.id
							})
							if (index == -1) {
								this.assetForm.assetList.push(el)
							}
						})
					}
					this.$refs.modelDialog.closeDialog()
				}
			},
			cancelAsset() {
				this.$refs.modelDialog.closeDialog()
			},
			removeAsset(index) {
				this.assetForm.assetList.splice(index, 1)
			},
			removeFile(index) {
				this.fileList.splice(index, 1)
			},
			cancelForm() {
				this.messageBox('确定取消将丢失未保存的信息！')
					.then(() => {
						this.$refs.form.resetFields()
						this.$router.go(-1)
					})
					.catch(() => {})
			},
			saveTemp() {
				/**
				 * @todo
				 */
				postAction(assetPutawayApi.add, this.assetForm, 2).then(res => {
					if (res.success) {
						this.$router.go(-1)
					}
				})
			},
			// onSubmit() {
			// 	this.$refs.form.validate(valid => {
			// 		if (valid) {
			// 			this.messageBox('资产信息确认无误，提交审核?').then(res => {
			// 				if (res.action) {
			// 					postAction(assetPutawayApi.addAndSubmit, this.assetForm, 2).then(res => {
			// 						if (res.success) {
			// 							this.$router.go(-1)
			// 						}
			// 					})
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			onSubmit() {
				this.$refs.form.validate(valid => {
					if (valid) {
						// this.messageBox('资产信息确认无误，提交审核?').then(res => {
						// 	if (res.action) {
						this.showFlowSend = true
						this.checkFlowType = 1
						this.instNodeId = this.assetForm.wfInstNodeId
						this.sendtype = 0
						// if (this.assetForm.wfInstNodeId) {
						// 	this.sendtype = 1
						// 	this.instNodeId = this.assetForm.wfInstNodeId
						// } else {
						// 	this.sendtype = 0
						// }
						// 	}
						// })
					}
				})
			},
			FlowSendsave() {
				this.$message.success('操作成功!')
				this.$router.go(-1)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main-con {
		background: #ffffff;
		padding: 20px 15px;
		position: relative;
	}

	.form-con {
		// width: 80%;
		height: calc(100% - 40px);
		overflow-y: auto;
	}

	.pro-label {
		/deep/.el-form-item__label {
			display: flex;
			justify-content: end;
			align-items: center;
		}
	}

	.text-btn-table {
		color: #409eff !important;
	}

	.file-con {
		width: 82px;
		height: 62px;
		border: 1px solid #7bc6b5;
		margin-right: 15px;
		border-radius: 6px;
		position: relative;
	}

	.image {
		width: 80px;
		height: 60px;
		border-radius: 6px;
	}

	.bottom-btn {
		text-align: center;
		position: absolute;
		bottom: 20px;
		width: 100%;
	}

	.remove-file {
		position: absolute;
		right: -5px;
		top: -5px;
		z-index: 10;
		color: red;
		background: #ffffff;
		border-radius: 50%;
		font-size: 16px;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		cursor: pointer;
	}
</style>
